<template>
    <div class="sensor_content">
        <div class="content_left">
            <div class="menu_tree" @contextmenu.prevent="contextMenu($event)">
                <el-tree ref="treeSelect" :data="treeData" :props="defaultProps" @node-click="handleNodeClick"
                    :render-after-expand="false" highlight-current node-key="value"
                    @node-contextmenu="handleNodeContextmenu" :default-expanded-keys="defaultExpandedKey"
                    :default-checked-keys="defaultCheckedKey" @current-change="handleCurrentChange"
                    :current-node-key="currentNodeKey">
                    <span class="custom-tree-node" slot-scope="{ node, data }">
                        <span>
                            <i :class="data.icon"></i>
                            {{ node.label }}
                        </span>
                    </span>
                </el-tree>
            </div>
            <vue-context-menu :contextMenuData="contextMenuData" @diaReport="diaReport" />
        </div>
        <div class="content_mid">
            <div class="mask"></div>
            <waveform :father_1="sensorInfo" :father_2="device_id" ref="waveForm" />
        </div>
        <div class="content_right">
            <Data :father_1="sensorInfo" />
        </div>
        <down-report ref="downReport" />
    </div>
</template>

<script>
import downReport from '@/components/downReport'
import { sensorDetailsApi, requestApi } from '@/requset/api'
import { contextMenuData } from './config'
import Data from './Data'
import waveform from './Waveform'
export default {
    data() {
        return {
            filterText: '',
            treeData: [],
            defaultProps: {
                children: 'children',
                label: 'label',
            },
            // 默认展开的节点
            defaultExpandedKey: [],
            defaultCheckedKey: [],
            sensorData: [],
            // 选中的测点信息
            sensorInfo: {},
            userLevel: null,
            device_id: null,
            currentNodeKey: null,
            contextMenuData: null,
            currentNode: null,
        }
    },
    components: {
        waveform,
        Data,
        downReport
    },
    methods: {
        getTree() {
            return requestApi('post', 'diagnosis/tree', {}, true).then((res) => {
                if (res.data.code == 0) {
                    this.treeData = res.data.data
                    if (this.treeData.length !== 0) {
                        let data = this.treeData[0]
                        if (this.$route.query.sensor_id) {
                            let sensor_id = Number(this.$route.query.sensor_id)
                            let device_id = Number(this.$route.query.device_id)
                            this.$nextTick(() => {
                                this.defaultExpandedKey.push(device_id)
                                this.$refs['treeSelect'].setCurrentKey(sensor_id)
                                this.sensorDetails(sensor_id)
                            })
                        } else
                            while (1) {
                                if (data.type === 'd') {
                                    this.device_id = data.value
                                    this.defaultExpandedKey.push(data.value)
                                    this.$nextTick(() => {
                                        this.$refs['treeSelect'].setCurrentKey(data.value)
                                    })
                                }
                                if (data.type === 's') {
                                    this.sensorDetails(data.value)
                                    this.$nextTick(() => {
                                        this.$refs['treeSelect'].setCurrentKey(data.value)
                                    })
                                }
                                if (data.children.length === 0) break
                                data = data.children[0]
                            }
                    }
                }
            })
        },
        handleCurrentChange(e, node) {
            let type_ = e.type
            if (type_ == 's') {
                this.device_id = node.parent.data.value
                this.sensorDetails(e.value)
            } else if (type_ == 'd') {
                this.device_id = e.value
            }
            this.$refs.waveForm.initImg(this.device_id)
        },
        // 查询测点详情
        sensorDetails(id) {
            sensorDetailsApi(id).then((res) => {
                if (res.data.code == 0) {
                    this.sensorInfo = res.data.data
                }
            })
        },
        handleNodeContextmenu(event, node, Node) {
            let type_ = node.type
            if (type_ == 's') {
                this.device_id = Node.parent.data.value
                this.sensorDetails(node.value)
            } else if (type_ == 'd') {
                this.device_id = node.value
            }
            this.contextMenu(event)

            this.currentNode = {
                data: node,
                type: 'tree'
            }
        },
        contextMenu(e) {
            let x = e.clientX
            let y = e.clientY
            this.contextMenuData.axis = { x, y }
        },
        diaReport() {
            this.$refs.downReport.doOpen()
        }
    },
    created() {
        this.getTree().then(() => {
            this.contextMenuData = contextMenuData
        })
    },
}
</script>

<style scoped lang="less">
.sensor_content {
    width: 100%;
    height: 100%;
    position: relative;

    .content_left {
        width: 280px;
        height: 98%;
        // background-color: red;
        position: absolute;
        left: 10px;
        top: 1%;
        background-image: url(@/assets/DeviceDia/tree_left_bg.png);
        background-size: 100% 100%;

        .menu_tree {
            position: absolute;
            top: 3%;
            left: 3%;
            width: 94%;
            height: 94%;
            overflow-y: auto;
        }
    }

    .content_mid {
        width: calc(100% - 580px);
        height: 100%;
        position: absolute;
        left: 290px;

        .mask {
            background-image: url(@/assets/common/table_bg.png);
            background-size: 100% 100%;
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            opacity: 0.8;
        }
    }

    .content_right {
        position: absolute;
        width: 280px;
        height: 98%;
        // background-color: red;
        right: 10px;
        top: 1%;
        background-image: url(@/assets/DeviceDia/tree_left_bg.png);
        background-size: 100% 100%;
    }
}
</style>
<style lang="less"></style>
